<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/login.css">
</head>

<body>
  <div class="head_top">
    <div class="w clearfix">
      <div class="logo">
        <a href="../html/index.html">
          <img src="../img/logo.jpg" alt="">
        </a>
      </div>
      <div class="r">
        <a href="" class="real">

        </a>
        <a href="" class="you">

        </a>
        <a href="" class="dian">

        </a>
      </div>
    </div>
  </div>
  <div class="head_center">
    <div class="w">
      <div class="login">
        <div class="shadow_l">
        </div>
        <div class="shadow_r">
        </div>
        <h2>登录聚美<p>还没有聚美账号？<a href="../html/reg.html">30秒注册</a></p>
        </h2>
        <p class="p1"><input type="radio" id="act" name="login_style" class="" checked><label for="act">手机动态密码获取</label>
          <input type="radio" id="old" name="login_style" class=""><label for="old">普通登录</label>
        </p>
        <form action="" class="form1">
          <p class="p2"><input type="text" placeholder="已注册的手机号码"></p>
          <p class="p3 clearfix"><input type="text" placeholder="动态密码"><button class="getpsd">获取手机动态密码</button></p>
          <p class="p5"><input type="checkbox" id="autologin" checked><label for="autologin">自动登录</label></p>
          <input type="button" value="登录">
        </form>
        <form class="form2">
          <p class="p2"><input type="text" placeholder="已验证手机/邮箱/用户名"></p>
          <p class="p3 clearfix"><input type="text" placeholder="密码"></p>
          <p class="p4">
            <span class="tip">请安住滑块，拖动到最右边</span>
            <span class="cover"></span>
            <a href="javascript:;">>></a>
          </p>
          <p class="p5"><input type="checkbox" id="autologin" checked><label for="autologin">自动登录</label></p>
          <input type="button" value="登录" >
        </form>

        <div class="other_mode">
          <p>你也可以使用以下账号登录</p>
          <p><a href="" class="qq"></a><a href="" class="apid"></a><a href="" class="weibo"></a><a href=""
              class="ths"></a><a href="" class="baidu"></a><span class="more">更多<i></i></span>
            <a href="" class="chat"></a><a href="" class="rr"></a><a href="" class="tuan"></a>
        </div>
      </div>
    </div>
  </div>
  <script src="../js/jquery-3.6.0.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="../js/api.js"></script>
  <script src="../js/login.js"></script>
  <script>
    //点击切换登录方式
    $(".login .p1 input").click(function () {
      showCont()
    })
    function showCont() {
      switch ($(".login .p1 input:checked").attr("id")) {
        case "act":
          $(".form1").show()
          $(".form2").hide()
          break;
        case "old":
          $(".form1").hide()
          $(".form2").show()
          $(".head_center .login").css("height", "478")
          break;
        default: break;
      }

    }

    $(".other_mode .more").click(function () {
      if ($(".login .p1 input:checked").attr("id") == "act") {
        if ($(".head_center .login").css("height") == "414px") {
          $(".head_center .login").animate({
            height: 478,
          })
        }
        if ($(".head_center .login").css("height") == "478px") {
          $(".head_center .login").animate({
            height: 414,
          })
        }
      } else {
        if ($(".head_center .login").css("height") == "478px") {
          $(".head_center .login").animate({
            height: 540,
          })
        }
        if ($(".head_center .login").css("height") == "540px") {
          $(".head_center .login").animate({
            height: 478,
          })
        }
      }

    })
    //点击滑块验证
    $(".form2 .p4 a").mousedown(function (event) {
      event.preventDefault();
      var x = event.clientX
      var that = this;
      document.onmousemove = function (event) {
        var left = event.pageX - x;
        if (left < 0) {
          left = 0
        }
        if (left > 258) {
          left = 258
        }
        that.style.left = left + "px";
        $(".form2 .p4 .cover").css("width", left)
      }
      document.onmouseup = function (event) {
        if (parseInt($(that).css("left")) < 258) {
          $(that).animate({
            left: 0,
          })
          $(".form2 .p4 .cover").animate({
            width: 0,
          })

        } else {
          $(".form2 .p4 .cover").css({
            zIndex: 10,
            color: "rgb(255,255,255)"
          }).html("验证通过")
          $(".form2 .p4 a").addClass("success").css("zIndex", "7")
        }
        document.onmousemove = null;
      }
    })
  </script>

</body>

</html>